<template>
    <div class="container">

        <!-- 顶部按钮区域 -->
        <div class="header">
            <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small" label-width="80px">
                <el-form-item label="分流部门">
                    <el-select v-model="formInline.region" placeholder="分流部门">
                        <el-option v-for="item in bmzhanghao" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="搜索">
                    <el-input v-model="formInline.user" placeholder="请输入关键字"></el-input>
                </el-form-item>
                <el-form-item label="乡镇">
                    <el-select v-model="formInline.region" placeholder="乡镇">
                        <el-option v-for="item in xiangzhen" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="办理周期">
                    <el-date-picker v-model="ruleForm.data" type="daterange" align="right" unlink-panels
                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                        :picker-options="pickerOptions2">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button class="search_button" type="primary" icon="el-icon-search"
                        @click="onSearch">搜索</el-button>
                    <el-button class="chongzhi_button" type="default" icon="el-icon-refresh"
                        @click="onReset">重置</el-button>
                    <el-button type="primary" @click="onplduban">打印附件</el-button>
                    <el-button type="primary" @click="onplduban">导出</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!-- 表格区域 -->
        <el-table :data="data" style="width: 100%" stripe>
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="serialNumber" label="序号" width="80"></el-table-column>
            <el-table-column prop="registrationDate" label="登记时间" width="120"></el-table-column>
            <el-table-column prop="registrationDate" label="办结时间" width="120"></el-table-column>
            <el-table-column prop="briefDescription" label="简要事由" width="300"></el-table-column>
            <el-table-column prop="name" label="姓名" width="100">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 4px">{{ scope.row.name }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="gender" label="性别" width="100">

            </el-table-column>
            <el-table-column prop="contactPhone" label="身份证号" width="250">
            </el-table-column>
            <el-table-column prop="contactPhone" label="家庭住址或单位" width="250">
            </el-table-column>

            <el-table-column prop="department" label="分流转办部门" width="120">
                <template slot-scope="scope">
                    <el-tag class="flzbbumen">{{ scope.row.handleStatus }}</el-tag>
                </template>
            </el-table-column>

            <el-table-column label="操作" width="180" fixed="right">
                <template slot-scope="scope">
                    <el-button size="small" class="process-btn" @click="handleItem(scope.row)" @mouseover="hover = true"
                        @mouseleave="hover = false" :style="hover ? hoverStyle : {}">
                        查看
                    </el-button>
                    <el-button size="small" type="danger" class="delete-btn" @click="deleteItem(scope.row)"
                        @mouseover="hover = true" @mouseleave="hover = false" :style="hover ? hoverStyle : {}">
                        打印附件
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页区域 -->
        <div class="pagination-container">
            <el-pagination background @current-change="handlePageChange" :current-page="currentPage"
                :page-size="pageSize" :total="totalItems" layout="total, prev, pager, next"
                class="pagination"></el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            activeName: "first", /* 头部tabs切换 */
            pickerOptions2: {
                shortcuts: [
                    {
                        text: "最近一周",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近一个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近三个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                ],
            },
            formInline: {
                user: "",
                region: "",
            },
            ruleForm: [],
            searchQuery1: "",
            searchQuery2: "",
            hover: false,
            currentPage: 1,
            pageSize: 7,
            totalItems: 2888,
            data: [
                {
                    serialNumber: "01",
                    registrationDate: "2024-11-21",
                    briefDescription: "某工人小摔伤",
                    name: "张三",
                    gender: "男",
                    contactPhone: "13987654321",
                    idCard: "4008001999001027789",
                    address: "高唐县姜店镇中心街 58号",
                    department: "物业部门",
                    handleStatus: "处理中",
                },
                // 示例数据...
            ],
            hoverStyle: {
                backgroundColor: "#e4f7ff",
                color: "#409eff",
            },
        };
    },
    methods: {
        /* 头部tabs切换 */
        handleClick() {
        },
        /* 搜索按钮 */
        onSearch() {

        },
        /* 重置按钮 */
        onReset() {
            this.searchQuery1 = "";
            this.searchQuery2 = "";
        },
        // 处理
        handleItem(row) {
            console.log("Handling item:", row);
        },
        // 删除
        deleteItem(row) {
            console.log("Deleting item:", row);
        },
        // 分页更改
        handlePageChange(page) {
            this.currentPage = page;
            console.log("Page changed to:", page);
        },
    },
};
</script>

<style scoped>
.container {
    margin: 20px 30px;
    font-family: "Arial", sans-serif;
}

.header {
    margin-bottom: 20px;
    background-color: #f4f7fa;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.button {
    font-size: 14px;
    padding: 8px 16px;
}

.search-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
}

.search-input {
    width: 200px;
    margin-right: 20px;
    border-radius: 4px;
}

.search-btn,
.reset-btn {
    padding: 8px 16px;
    font-size: 14px;
}

.search-btn {
    background-color: #409eff;
    color: white;
    margin-right: 10px;
}

.reset-btn {
    background-color: #f0f2f5;
    color: #333;
}

.process-btn {
    background-color: #409eff;
    color: white;
    margin-right: 5px;
    border-radius: 4px;
}

.delete-btn {
    background-color: #f56c6c;
    color: white;
    border-radius: 4px;
}

.el-table th {
    background-color: #f5f7fa;
    font-weight: bold;
}

.el-table td {
    font-size: 14px;
    line-height: 40px;
}

.el-table-row:hover {
    background-color: #f0f9ff;
}

.pagination {
    font-size: 14px;
}

.el-pagination__prev,
.el-pagination__next {
    background-color: #409eff;
    color: white;
}

.el-pagination__pager {
    color: #409eff;
}
</style>